import React from 'react';
import { GridContent } from '@ant-design/pro-layout';
import { Row, Col } from 'antd';
import { StatisticCard, ProCard } from '@ant-design/pro-components';
import styles from './index.less';
const { Divider } = StatisticCard;

export default function welcome() {
  return (
    <GridContent>
      <div className={styles.cardContainer}>
        <div className={styles.cardLeft}>
          <h1 style={{ color: 'white' }}>Hi, 欢迎使用应用Gollum 快速开发平台！</h1>
          <p>轻松创建、部署，提升研发效率，降低业务成本。</p>
        </div>
        <div className={styles.cardRight}>123</div>
      </div>
      <div style={{ marginTop: '10px' }} />
      <Row gutter={[8, 8]}>
        <Col span={16}>
          <StatisticCard.Group style={{ padding: '10px' }}>
            <StatisticCard
              statistic={{
                title: '全部',
                tip: '帮助文字',
                value: 10,
              }}
            />
            <Divider />
            <StatisticCard
              statistic={{
                title: '未发布',
                value: 5,
                status: 'default',
              }}
            />
            <StatisticCard
              statistic={{
                title: '发布中',
                value: 3,
                status: 'processing',
              }}
            />
            <StatisticCard
              statistic={{
                title: '发布异常',
                value: 2,
                status: 'error',
              }}
            />
            <StatisticCard
              statistic={{
                title: '发布成功',
                value: '-',
                status: 'success',
              }}
            />
          </StatisticCard.Group>
        </Col>
        <Col span={16}>
          <ProCard title="默认尺寸" extra="extra" tooltip="这是提示">
            <div>Card content</div>
            <div>Card content</div>
            <div>Card content</div>
          </ProCard>
        </Col>
      </Row>
    </GridContent>
  );
}
